<template>
	<div :class="curClassName" :style="curStyle">
		<van-field
			v-model="curValue"
			:class="editorClassName"
			:disabled="disabled"
			placeholder="请选择组织"
			@click="showPicker = true"
		>
			<template #right-icon>
				<van-icon name="arrow-down" />
			</template>
		</van-field>
		<van-popup v-model:show="showPicker" round position="bottom">
			<van-picker
				:columns="items"
				@cancel="showPicker = false"
				@confirm="onConfirm"
			/>
		</van-popup>
	</div>
</template>
<script setup lang="ts">
import { LoginOrgProps } from './login-org';
import { Ref } from 'vue';
import { IEvent } from '@/core';

const props = defineProps(LoginOrgProps);

interface LoginOrgEmit {
	(name: 'component-action', value: IEvent<string>): void;
}
const emit = defineEmits<LoginOrgEmit>();
const showPicker = ref(false);
/**
 * 项名称
 *
 * @memberof AppLoginOrg
 */
const itemName = computed(() => {
	return props.index || props.index === 0
		? `${props.name}_${props.index}`
		: props.name;
});

/**
 * 当前容器样式
 *
 * @memberof AppLoginOrg
 */
const curStyle = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.getElementStyle();
	}
});

/**
 * 编辑器类名
 *
 * @memberof AppLoginOrg
 */
 const editorClassName = computed(() => {
    const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.getEditorDynaClass();
	}
})

/**
 * 禁用
 *
 * @memberof AppLoginInput
 */
 const disabled = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.disabled;
	}
});


/**
 * 类名
 *
 * @memberof AppLoginOrg
 */
const curClassName = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	const classNames = {
		'app-login-org': true,
	};
	if (layoutModel) {
		Object.assign(classNames, layoutModel.getClassNames());
	}
	return classNames;
});

/**
 * 当前值
 *
 * @type {any}
 * @memberof AppLoginInput
 */
const curValue = computed({
	get: () => props.value || '',
	set: (val) => {
		emit('component-action', {
			name: props.name,
			action: 'valueChange',
			data: val,
		});
	},
});

/**
 * 组织部门名称数组
 *
 * @type {Array<any>}
 * @memberof AppLoginOrg
 */
const items: Ref<Array<any>> = ref([]);

/**
 * 获取数据
 *
 * @memberof AppLoginOrg
 */
const getOrgData = () => {
	// todo
	console.log('获取数据暂未实现');
};

getOrgData();

const onConfirm = (selectedValues: any, selectedOptions: any) => {
	//todo
	console.log('选中数据：', selectedValues);
};
</script>
